<template lang="pug">
div
  app-header(fixed,title="用户登录",back,v-if="!$helper.isWechat")
  div.form
    mt-field(v-model="username",label="用户名",placeholder="请输入",type="text")
    mt-field(v-model="password",label="密码",placeholder="请输入",type="password")
  p
    mt-button(size="small",type="danger",@click="submitHandler") 登录
    a(href="javascript:void(0)",@click="regHandler") 还没有账号？
</template>

<script>
import { Toast, Button, MessageBox, Field } from 'mint-ui'
import Header from 'components/Header'
import { mapActions } from 'vuex'
export default {
  components: {
    'mt-button': Button,
    'mt-field': Field,
    'app-header': Header
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    ...mapActions({
      login: 'login'
    }),
    async submitHandler (id) {
      if (!this.username) {
        return Toast('请输入用户名')
      }
      if (!this.password) {
        return Toast('请输入密码')
      }
      let username = this.username
      let password = this.password
      let result = await this.login({username, password})
      if (result.code === 0) {
        MessageBox.alert(result.message).then(action => {
          let uri = this.$route.params.uri
          window.location.href = decodeURIComponent(uri)
        })
      } else {
        Toast(result.message)
      }
    },
    regHandler () {
      this.$router.push({name: 'register'})
    }
  }
}
</script>
<style lang="stylus" scoped>
p
  text-align: center
  line-height: 2.125rem /* 50/16 */
  button
    outline: none
    cursor: pointer
    width: 89%
  a
    font-size: 0.35rem
    float: right
    position: absolute
    margin-left: -2.5rem
    margin-top: 0.9rem
    text-decoration: none
</style>
